<template>
  <div class="consultation-container">
      <div class="case-container">
        <div v-show="selectSession==null">
          <h2 style="margin-left: 20px;margin-top: 20px">正在进行的会诊</h2>
          <session v-for="(session,index) in sessionList" @sessionInfo="getSessionInfo" :session-info="session"></session>
        </div>
        <case-form v-show="selectSession!=null" :case-detail="selectSession" :show="false"></case-form>
      </div>
      <case-im class="im-container" v-show="selectSession!=null"
              @closeSession="closeSession"
              @showEdit="showEdit"
              @endSession="endSession"></case-im>
    <el-drawer
      title="填写会诊意见"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <div class="demo-drawer__content" style="margin-left: 5px">
        <div style="display: flex">
          <p style="margin-left: 5px">患者姓名：{{patientInfo.name}}</p>
          <p style="margin-left: 5px">性别：{{patientInfo.gender}}</p>
          <p style="margin-left: 5px">年龄：{{patientInfo.age}}</p>
          <p style="margin-left: 5px">主诉：{{patientInfo.disease}}</p>
        </div>
        <el-form :model="form">
          <input v-model="form.id" v-show="false"></input>
          <el-form-item label="会诊记录">
            <el-input v-model="form.record" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="诊断结果">
            <el-input v-model="form.diagnose" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用药建议">
            <el-input v-model="form.suggestion1" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="治疗建议">
            <el-input v-model="form.suggestion2" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="会诊意见">
            <el-input v-model="form.suggestion3" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitForm" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import caseForm from '@/components/casePeportForm'
import caseIm from './im'
import session from './session'
import { consultationList, messageList, getResult, resultPost, updateConsultation } from '@/api/doctor.js'
import { mapGetters } from 'vuex'
import { getTimeNow } from '../../../utils/myUtil'
import { sendMessage } from '../../../utils/websocket'
export default {
  name: 'consultation',
  data() {
    return {
      sengMessage: '',
      selectSession: null,
      sessionList: [],
      dialog: false,
      form: {},
      loading: false,
      patientInfo: {}
    }
  },
  components: {
    caseForm,
    caseIm,
    session
  },
  created() {
    // 获取正在正在进行的会诊
    this.getList()
  },
  methods: {
    async endSession(info) {
      this.patientInfo = info
      const res = await getResult({ id: info.id })
      if (res.data.suggestion3 === null) {
        this.$message({
          type: 'error',
          message: '请先填写会诊意见书！'
        })
        return
      }
      // 结束会诊
      this.$confirm('是否结束该会诊？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 更新会诊操作
        const res = await updateConsultation({ id: info.id, state: 2 })
        this.$message({
          type: 'success',
          message: res.data
        })
        this.getList()
        let receiver
        if (this.selectSession.from === this.userInfo.id) receiver = this.selectSession.to
        else receiver = this.selectSession.from
        const message = {
          consultationId: this.selectSession.id,
          sender: this.userInfo.id,
          receiver: receiver,
          type: 'text',
          content: '会诊已结束，请前往会诊记录产看会诊意见',
          time: getTimeNow()
        }
        sendMessage('message', message)
        this.selectSession = null
      })
    },
    // 提交意见 异步发送
    async submitForm() {
      if (this.form.suggestion3 === '' || !this.form.suggestion3) {
        this.$message({
          type: 'error',
          message: '会诊意见为必填项！'
        })
        return
      }
      const res = await resultPost(this.form)
      this.$message({
        type: 'success',
        message: res.data
      })
      this.dialog = false
    },
    // 显示信息
    async showEdit(info) {
      this.patientInfo = info
      const res = await getResult({ id: info.id })
      this.form = {
        id: res.data.id,
        record: res.data.record,
        diagnose: res.data.diagnose,
        suggestion1: res.data.suggestion1,
        suggestion2: res.data.suggestion2,
        suggestion3: res.data.suggestion3
      }
      this.dialog = true
    },
    handleClose() {
      this.dialog = false
    },
    getList() {
      const params = {
        id: this.userInfo.role === 'doctor' ? this.userInfo.id : null,
        state: 1
      }
      consultationList(params).then((res) => {
        this.sessionList = res.data
      })
    },
    async getSessionInfo(info) {
      // 获取聊天记录
      await this.$store.commit('SET_DOCTOR_INFO', info)
      const res = await messageList({ consultationId: info.id })
      await this.$store.dispatch('setChatting', info.id)
      await this.$store.dispatch('setMessageList', res.data)
      this.selectSession = info
      const container = this.$el.querySelector('#message-content')
      container.scrollTop = container.scrollHeight
      const message = {
        toID: info.from === this.userInfo.id ? info.to : info.from,
        sessionID: info.id
      }
      sendMessage('getCheck', message)
    },
    // 关闭会话
    closeSession() {
      this.$store.dispatch('clearMessage')
      this.selectSession = null
    }
  },
  destroyed() {
    this.$store.dispatch('clearMessage')
  },
  computed: {
    ...mapGetters(['userInfo']),
    caseDetail() {
      const caseDetail = this.$store.state.casePeportForm.caseDetail
      caseDetail.images = ''
      return caseDetail
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .consultation-container{
    height: 100%;
    overflow: hidden;
    .case-container{
      float: left;
      width: 50%;
      height: 100%;
      overflow: auto;
      overflow-y: scroll;
      max-width: 100vw;
      margin: 0 auto;
    }
    .im-container{
      height: 100%;
      margin-left: 52%;
      position: relative;
    }
  }
</style>
